<template>
    <div>
        <el-page-header @back="goBack" content="">
        </el-page-header>
        <el-row style="margin-top: 30px;">
            <el-col :span="8" :offset="10">
                <div class="grid-content bg-purple-light">基础指标-Test{{ id }}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24"><el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="date" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table></el-col>

        </el-row>
        <el-row>

            <el-col :span="12">
                <div class="lineDom" ref="lineDom1">123</div>
            </el-col>
            <el-col :span="12">
                <div class="lineDom" ref="lineDom2">123</div>
            </el-col>
        </el-row>

    </div>
</template>



<script>

var option = {
    color: ["#3C69CA"],
    tooltip: {
        trigger: "axis",
        axisPointer: {
            snapboolean: "true",
            label: {
                color: "#9a9a9a"
            },
            type: "none",
            crossStyle: {
                color: "#999"
            }
        }
    },
    grid: {
        top: 20,
        left: 80,
        right: 80,
        height: 160
    },
    xAxis: {
        boundaryGap: false, //刻度不从0开始
        axisTick: {
            show: false
        }, //不显示刻度
        axisLine: {
            lineStyle: {
                color: "#e3e3e3" //坐标轴线的颜色
            }
        },
        axisLabel: {
            show: true, //这行代码控制着坐标轴x轴的文字是否显示
            textStyle: {
                color: "#666666", //x轴上的字体颜色
                fontSize: "12" // x轴字体大小
            }
        },
        splitLine: {
            show: false // 网格线是否显示
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: "value",
        axisLine: {
            lineStyle: {
                color: "#e3e3e3" //坐标轴线的颜色
            }
        },
        axisTick: {
            show: false
        }, //不显示刻度
        splitLine: {
            show: true, // 网格线是否显示
            //  改变样式
            lineStyle: {
                color: "#E3E3E3", // 修改网格线颜色
                type: "dotted" //虚线
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#666666",
                fontSize: "12"
            }
        }
    },
    series: [
        {
            name: "浏览量（PV）",
            type: "line",
            areaStyle: {
                color: "#EEF3FF"
            },
            data: [150, 230, 224, 218, 135, 147, 260]//从0开始
        }
    ]
};
export default {
    data() {
        return {
            id:0,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            lineChart1: null
        }
    },
    created() {
        // getChart(query).then(res => {
        // let data = res.data.data;
        // option.xAxis.data = data.map(el => el.date);
        // option.series[0].data = data.map(el => el.total);
        // option.series[0].name = this.lineType[query.type].label;
        this.$nextTick(() => {
            this.drawPie("lineDom1");
            this.drawPie("lineDom2");
        });
        // });
        this.id =this.$route.query.id
    },
    methods: {
        goBack() { this.$router.back() },
        drawPie(key) {

            // 初始化echarts实例
            this[key] = this.$echarts.init(this.$refs[key]);

            this[key].resize();

            // 绘制图表
            this[key].setOption(option, true);

            // 图表自适应
            let that = this;
            window.addEventListener("resize", function () {
                that[key].resize();
            });
        },

    }

}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.upload-demo {
    margin: 0 auto;
}

.lineDom {
    height: 300px;
    width: 100%;
    margin: 0px;
    background-color: #fff;
}
</style>